<template>
  <div id="app" class="page">
  	<div class="page_content" v-if="isMobile">
		<component :is="fullScreenADComponent" v-if="isShowFullScreenAd"></component>
		<component :is="headerComponent" v-if="isShowHeaderAd && type !== 'mallGoodsDetail' && type !== 'mallGoodsCart'"></component>
		<div class="page_header" v-if="type !== 'mallGoodsDetail' && type !== 'mallGoodsCart'">
			<Header :Logo="logo" :channelName="channelName" :searchKey="searchKey" :islogin="is" :user="user" />
			<Nav :type="type" :menus="channels" />
		</div>
		<div class="page_main" :class="{'no_home' : type !== 'home'}">
			<router-view v-on:upLocalData="upLocalData" :type="type" :channels="channels" :mainComponent="mainComponent" :newsListAdComponent="newsListAdComponent"></router-view>
		</div>
		<div class="page_footer" v-if="type !== 'mallGoodsDetail' && type !== 'mallGoodsCart'">
			<Footer :footerComponent="footerComponent" />
		</div>
		<Gototop />
		<!--remote-script src="https://i5.hexun.com/2016/m/20160603/js/jquery.2.2.0.js"></remote-script>
		<remote-script src="https://i5.hexun.com/2016/ereddate/jquery.qrcode.js"></remote-script-->
	</div>
	<div class="no_mobile" v-if="!isMobile">
		<div class="no_mobile_content">
			<h1>{{errorMsg}}</h1>
			<a @click="refreshPage($event)" class="refresh_page">己处理, 点击重试</a>
		</div>
	</div>
  </div>
</template>

<script>
	import Header from './components/common/Header.vue';
	import Footer from './components/common/Footer.vue';
	import Nav from './components/common/Nav.vue';
	import Gototop from "./components/common/goto-top.vue";
	var searchKey = encodeURIComponent("和讯");
	export default {
		name: 'app',
		data: function() {
			return {
				headerComponent: r => require.ensure([], () => r(require('./components/ad/header-ad.vue')), 'HeaderAd'),
				mainComponent: r => require.ensure([], () => r(require('./components/ad/main-ad.vue')), 'MainAd'),
				newsListAdComponent: r => require.ensure([], () => r(require('./components/ad/newslist-ad.vue')), 'NewsListAd'),
				footerComponent: r => require.ensure([], () => r(require('./components/ad/footer-ad.vue')), 'FooterAd'),
				fullScreenADComponent: r => require.ensure([], () => r(require('./components/ad/fullscreen-ad.vue')), 'FullScreenAd'),
				logo: "//i8.hexun.com/2016/m/20171016/img/logonew.png",
				type: "",
				searchKey: searchKey,
				channelName: "",
				channels: this.$store.state.channels(searchKey),
				is: this.$store.state.user.islogin === "True" ? true : false,
				user: this.$store.state.user,
				isShowHeaderAd: this.$store.state.ad.headerAd,
				isShowFullScreenAd: this.$store.state.ad.fullScreenAd,
				isMobile: !device.os.isIOS && !device.os.isAndroid ? false : true,
				errorMsg: '请使用移动设备访问此页面...'
			}
		},
		components: {
			Header,
			Footer,
			Nav,
			Gototop
		},
		methods: {
			upLocalData(args) {
				//console.log(args)
				args.concat ? args.forEach((item) => {
					this.$set(this, item.name, item.value);
				}) : this.$set(this, args.name, args.value);
			},
			refreshPage(e){
				location.reload();
			},
			resizeHandler:function(){
				this.$set(this, "isMobile", !device.os.isIOS && !device.os.isAndroid ? false : true);
			}
		},
		destroyed: function(){
			let that = this;
			window.removeEventListener('resize', that.throttleload);
		},
		mounted: function() {
			let that = this;
			that.throttleload = throttle(() => {
				that.resizeHandler()
			}, 100);
			window.addEventListener('resize', that.throttleload);

			if (!device.browser.isWechat) {
				window.addEventListener("online", function() {
					that.$set(that, "isMobile", true);
				});
				window.addEventListener("offline", function() {
					that.$set(that, "isMobile", false);
					that.$set(that, "errorMsg", "设备已经离线...");
				})
			} else {
				document.addEventListener("WeixinJSBridgeReady", function() {
					WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
						if (e.subtype === "fail") {
							that.$set(that, "isMobile", false);
							that.$set(that, "errorMsg", "设备已经离线...");
						}
						console.log(e);
					})
				})
			}

			/*let that = this;
			this.$http.jsonp(this.$store.state.api.userSignInApi).then(function(res){
				console.log(res.body);
				var data = res.body;
				that.$store.commit("setUser", data);
				that.$set(that, "is", data.islogin === "False" ? false : true);
				that.$set(that, "user", data);
			}, function(){
				
			});
			console.log(this.$store.state.user)*/
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	body, ul, li, h1, h2, h3, p{
			padding:0;
			margin:0;
			list-style: none;
	}
	body{
		margin:0;
		padding:0;
		background-color: #f4f5f7;
		a{
			text-decoration: none;
		}
		#app {
		  font-family: 'Avenir', Helvetica, Arial, sans-serif;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
			&.page{
				.page_content{
					.page_header{
						margin:10/@base 0 0;
						background: url("http://i8.hexun.com/2016/m/20171016/img/headerbg.png") repeat-x #e94e4e;
						/*z-index: 2;
						position:fixed;
						top:0;
						left:0;
						right:0;*/
					}
					.page_main{
						/*margin:170/@base 0 0;
						&.no_home{
							margin:80/@base 0 0;
						}*/
					}
					.page_footer{
						
					}
				}
				.no_mobile{
					min-height: 600/@base;
					padding:20/@base;
					text-align: center;
					display: flex;
					display: -webkit-flex;
					display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
					display: -moz-box; /* Firefox 17- */  
					display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
					display: -moz-flex; /* Firefox 18+ */  
					display: -ms-flexbox; /* IE 10 */  
					flex-direction: row;
					-webkit-flex-wrap: nowrap;
					flex-wrap: nowrap;
					justify-content: center;
					-webkit-justify-content: center;
					align-content: center;
					-webkit-align-content: center;
					align-items: center;
					-webkit-align-items: center;
					.no_mobile_content{
						h1{
							font-size:24/@base;
							padding:20/@base 0;
						}
						a{
							&.refresh_page{
								display:block;
								margin:20/@base 0 0;
								font-size:24/@base;
								border-radius: 5/@base;
								background-color: #ccc;
								padding:10/@base 40/@base;
							}
						}
					}
				}
			}
		}
	}
</style>
